<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(151, 150, 150);
        }
        
        .big {
            position: relative;
            background-color: #ffffff;
            margin: 80px;
            width: 1200px;
            height: 600px;
            z-index: -2;
        }
        
        .first {
            position: relative;
            top: 100px;
            left: 270px;
        }
        
        .second {
            background-color: rgb(36, 55, 90);
            width: 430px;
            height: 590px;
            position: absolute;
            right: 180px;
            top: -50px;
            z-index: -1;
            box-shadow: 5px 5px 10px #888888;
        }
        
        .thrid {
            background-color: #eed0cb;
            width: 350px;
            height: 250px;
            position: absolute;
            bottom: -60px;
            left: 330px;
            box-shadow: 5px 5px 10px #888888;
        }
        
        .fav {
            width: 300px;
            height: 450px;
            background-color: rgb(36, 55, 90);
            margin: 100px auto;
        }
        
        h1 {
            color: azure;
        }
        
        p {
            font-size: 15px;
        }
        
        .btn {
            color: rgb(76, 219, 48);
            background-color: #ffffff;
            display: inline-block;
            font-size: 17px;
            width: 200px;
            height: 30px;
            text-align: center;
            margin: 30px 0;
        }
        
        .sav {
            width: 300px;
            height: 140px;
            background-color: #eed0cb;
            margin: 20px auto;
        }
        
        .sav p {
            font-size: 12px;
        }
        
        .sav h2 {
            font-size: 20px;
            color: #c598cd;
        }
        
        .btm {
            background-color: #eed0cb;
            margin: auto 20px;
            display: inline-block;
            width: 150px;
            height: 30px;
            text-align: center;
            border: solid #ffffff;
        }
        
        img {
            box-shadow: 5px 5px 10px #888888;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="first">
            <img src=" https://via.placeholder.com/350x350" alt="">
        </div>
        <div class="second">
            <header>
                <div class="fav">
                    <h1>Phiiosphy</h1>
                    <p>A bad beginning makes a bad ending.</p>
                    <p>The longest day has an end.</p>
                    <p>A good medicine tastes bitter.</p>
                    <p>A bad workman always blames his tools.</p>
                    <div class="btn">LEARN MAHUB</div>
                </div>
            </header>
        </div>
        <div class="thrid">
            <div class="sav">
                <h2>Experience</h2>
                <p>A bird in the hand is worth than two in the bush.</p>
                <p>A boaster and a liar are cousins-german.</p>
                <p>A good fame is better than a good face.</p>
            </div>
            <div class="btm"> VIEW POIJNBTFVG</div>
        </div>
    </div>
</body>

</html>